<template>
  <div class="index_in">
      <el-form :model="params" :rules="rules" class="demo-form-inline" style="background-color: white; height: 80px">
      <el-form-item label="标题">
        <el-input placeholder="按标题查找" v-model="params.title"
          style="width: 200px;
            box-sizing: border-box;
            margin: 0px 15px 0px 0px;
            line-height: 80px;
            left:50px;
            margin-left: 100px;"
            ></el-input>
        <el-button  icon="el-icon-search" style="margin-left:50px" @click="getList(1)" >查询</el-button>
        
        <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>

         <el-button type="danger" icon="el-icon-delete" @click="delete_few()">批量删除</el-button>
       
      </el-form-item>
    </el-form>
    <el-table :data="rows" style="width: 100%; margin-top: 30px;margin-left:180px"  @selection-change="handleSelectionChange">>
      <el-table-column label="选中" width=50> 
    
         <el-table-column type="selection"  width="55"></el-table-column>

      </el-table-column>
      <el-table-column prop="img" label="图片" width=100> </el-table-column>
      <el-table-column prop="title" label="标题"  width=100> </el-table-column>
      <el-table-column prop="url" label="跳转地址"  width=200> </el-table-column>
      <el-table-column prop="status" label="是否启用"  width=100>
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="statusChange(scope.row)"
            :active-value="1"
            :inactive-value="0" >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- <el-button type="primary" icon="el-icon-edit" style="">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="delete_shanchu">删除</el-button> -->

        <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>

          <el-popconfirm title="确定删除数据吗？" @confirm="delete_shanchu(scope.row)">
          <el-button  type="danger" icon="el-icon-delete" slot="reference">删除</el-button>
        </el-popconfirm>
          </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChange"
      @current-change="getList"
      :current-page="params.pageNum"
      :page-sizes="[5, 10, 200, 300, 400]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog :title="ruleForm._id ? '修改' :'新增'" :visible.sync="dialogFormVisible" width="400px" >
      <el-form :model="ruleForm" status-icon:rules="rules" ref="ruleForm" label-width="100px">
     
        <el-form-item label="图片" prop="img">
          <el-input type="text" v-model="ruleForm.img" ></el-input>
        </el-form-item>

        <el-form-item label="标题" prop="title">  
          <el-input type="text" v-model="ruleForm.title" ></el-input>
        </el-form-item>

        <el-form-item label="跳转地址" prop="url"> 
          <el-input type="text" v-model="ruleForm.url" ></el-input>
        </el-form-item>

        <el-form-item label="类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择">
            <el-option v-for="type in types" :key="type.value" :label="type.label" :value="type.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>  
          <el-button @click="dialogFormVisible=false">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

  </div>
</template>

<script>



export default {
  name: "shouyeBanner",
  components: {
    //HelloWorld
  },
  data() {
    return {
       params:{
         title:'',
         type:'banner',
         pageNum:1,
          pageSize:5
       },

       dialogFormVisible:false,
        rows:[],
       total:0,

     ruleForm:{
       _id:0,
       img:'',
       type:'banner',
       url:'',
       title:''
     },
       
        rules: {
        img: [
          { required: true, message: "图片不能为空", trigger: "blur" }
        ],
        },
        types:[
          {label:'轮播图',value:'banner'},
           {label:'分类',value:'category'},
            {label:'推荐',value:'recommend'}
        ],
         selecteds:[]

    };
   
    
    
  },
  methods: {
    //获取列表
      getList(pageNum){
       if(pageNum) this.params.pageNum=pageNum
         this.$http({
           url:'/admin/index',
           params:this.params
           }).then(res =>{
          this.total=res.total
          this.rows=res.rows
    })
      },
      sizeChange(pageSize){
        this.params.pageSize=pageSize
         this.getList(1)
      },

      //新增
      add(){
        //初始化
        this.ruleForm={
       _id:0,
       img:'',
       type:'banner',
       url:'',
       title:''
     },
        this.dialogFormVisible=true
      },

         //修改
      edit(row){
        this.ruleForm=row
        this.dialogFormVisible=true

      },

      //提交
      submit(){
         this.$refs.ruleForm.validate(valid =>{
           if(valid){
             this.ruleForm.indexId=this.ruleForm._id
           this.$http({
          url:'/admin/index',
          method:this.ruleForm.indexId ? 'PUT' :'POST',
          data:this.ruleForm
        }).then(res=>{
          if(!res.errorMsg){
            this.dialogFormVisible=false
            this.getList(this.ruleForm.indexId ? undefined :1)
          }
        })
           }
         })
      
      },

      //删除
      delete_shanchu(row){
           this.$http({
          url:'/admin/index',
          method:'DELETE',
          params:{indexId:row._id}
        }).then(res=>{
          if(!res.errorMsg){
            this.getList(1)
          }
        })
      },

      //批量删除
      delete_few(){
        //获取选中数据
        let checkedRowsPromise=[]

        let success=[],fail=[]
        for(let i=0;i<this.selecteds.length;i++){
           checkedRowsPromise.push(
            new Promise(deletes =>{
              let row=this.selecteds[i]
              this.$http({
              url:'/admin/index',
              method:'DELETE',
              params:{indexId:row._id}
            }).then(res=>{
              if(!res.errorMsg){
               success.push(row._id)
              }else{
                 fail.push(row._id)
              }
              deletes()
            })
            })
          )
        }

        this.$confirm('确定批量删除数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() =>{
           //删除
        Promise.all(checkedRowsPromise).then(() =>{
          this.$message({
              message:`批量删除成功，成功删除${success.length}条数据,失败${fail.length}条数据`,
              duration:3000
             });
            this.getList(1)
        })

        })

       
      },

      handleSelectionChange(rows){
        //存储选中数据
        this.selecteds=rows
      },

   
      //启用/停用
      statusChange(row){
        console.log(row)
           this.$http({
          url:'/admin/index',
          method:'PUT',
          data:{
            indexId:row._id,
            status:row.status
          }
        }).then(res=>{
          if(res.errorMsg){
            this.getList()
          }
        })
      }
  },
  created() {
    this.getList()

  },
  mounted() {

  },
};
</script>

<style >
.index_in{
      margin-left: 20px;
    margin-top: 60px;
}

</style>
